<template>
  <div class="right-main">
    <div class="top">
      <div
        :class="['column', 'thumb', activitName === 'detail' ? 'sel' : 'nosel']"
        @click="() => (activitName = 'detail')"
      >
        商品详情
      </div>
      <div
        :class="[
          'column',
          'thumb',
          activitName === 'estimate' ? 'sel' : 'nosel',
        ]"
        @click="() => (activitName = 'estimate')"
      >
        买家评价(2000+)
      </div>
      <div
        :class="['column', 'thumb', activitName === 'order' ? 'sel' : 'nosel']"
        @click="() => (activitName = 'order')"
      >
        订购说明
      </div>
    </div>
    <div class="line"></div>
    <div class="show" v-show="activitName === 'detail'">
      <Detail />
    </div>
    <div class="show" v-show="activitName === 'estimate'">
      <Estimate />
    </div>
    <div class="show" v-show="activitName === 'order'">
      <Order />
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Detail from "./components/Detail/index.vue";
import Estimate from "./components/Estimate/index.vue";
import Order from "./components/Order/index.vue";
const activitName = ref<"detail" | "estimate" | "order">("detail");
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
